<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查询结果</title>
    <!--<link rel="icon" type="image/x-icon"  href="image/favicon%20(2).ico"/>-->
    <link href="css/result.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="container">
    <div class="contain">
        <div class="title">
            <p>查询结果</p>
        </div>
        <table>
            <tr>
                <td>姓名：</td>
                <td class="name">张三</td>
            </tr>
            <tr>
                <td>有效证件号：</td>
                <td>330688201010102222</td>
            </tr>
            <tr>
                <td>证书编号：</td>
                <td class="number">XNZX-2017-0001</td>
            </tr>
            <tr>
                <td>证书名：</td>
                <td>跨境电商结业证书</td>
            </tr>
            <tr>
                <td>荣誉称号：</td>
                <td class="chenghao">跨境电商优秀学员</td>
            </tr>
            <tr>
                <td>发证日期：</td>
                <td class="time">2017-10-23</td>
            </tr>
            <tr>
                <td>发证机构：</td>
                <td>跨境电商人才培养</td>
            </tr>
            <tr style="display: none;">
                <td>查询地址：</td>
                <td class="address">http://localhost:63342/certificate%20management/result.html</td>
            </tr>
            <tr>
                <td colspan="2"><a href="#certificate" id="cert">查看证书</a> </td>
            </tr>
        </table>
    </div>
</div>
<div id="certificate">
    <div class="contain">
        <div class="nameCon">
            <p id="name"></p>
        </div>
        <p id="chenghao"></p>
        <p id="number"></p>
        <p id="address"></p>
        <div id="time">
            <span id="year"></span>
            <span id="month"></span>
            <span id="day"></span>
        </div>
    </div>
</div>
<script src="js/jquery.js"></script>
<script>
    $(function () {
        $(".container").height($(window).height());
        $("#certificate").height($(window).height()).hide();
        $("#name").text($("table .name").text());
        $("#number").text($("table .number").text());
        $("#year").text($(".time").text().substr(0,4));
        $("#month").text($(".time").text().substr(5,2));
        $("#day").text($(".time").text().substr(8,2));
        $("#chenghao").text($(".chenghao").text());
        $("#address").text($(".address").text());
        $(".container table tr:not(:last)").each(function () {
            $(this).find("td:first").css({
                "textAlign":"right"
            });
        });
        $(".container table tr:not(:last)").each(function () {
            $(this).find("td:last").css({
                "textAlign":"left",
                "color":"dimgrey",
                "paddingLeft":"10px"
            });
        });
        $("#cert").click(function () {
            $("#certificate").show();
        });
        $("#certificate .contain").hover(function () {
            $("#certificate").click(function () {
                $(this).show();
            })
        },function () {
            $("#certificate").click(function () {
                $(this).hide();
            })
        })
    });
</script>
</body>
</html>